<!-- 上传图片 -->
<template>
	<view class="upData">
		<!-- 多张上传 -->
		<shmily-drag-image :borderRadius="borderRadius" :upDataType="type" :imageWidth="box" v-model="list"
			:number="imgSize" @submit="addImage">
		</shmily-drag-image>
	</view>
</template>

<script>
	// 引入vuex
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'


	export default {
		name: "upData",
		props: {
			//形状
			shape: {
				type: String,
				default: 'party', //party是方，round是圆
			},
			// 大小
			box: {
				type: Number,
				default: 120
			},

			/**
			 * 图片圆角
			 */
			borderRadius: {
				type: Number,
				default: 0
			},

			// 几张
			imgSize: {
				type: Number,
				default: 1,
			},

			// 返值
			submit: {
				type: Function,
				default: () => {}
			},

			// 返值2
			submit2: {
				type: Function,
				default: () => {}
			},

			// 上传类型
			type: {
				type: String,
				default: 'all'
			},

			/**
			 * 预览数据
			 */
			previewData: {
				type: Array,
				default: () => []
			},
			
			/**
			 * 应用场景
			 */
			useType:{
				type: String,
				default: 'all', // all是全部，headImg是头像
			}

		},
		data() {
			return {
				list: [], // 回显数据

				listData: [], // 可以用来分辨图片所在位置的数据

				listData2: [], // 最后排好的数据
			};
		},
		created() {},
		computed: {
			...mapGetters(['userInfo']),

		},
		watch: {
			/**
			 * 预览数据
			 */
			previewData: {
				handler() {
					if (this.previewData.length > 0) {
						this.list = [...this.previewData]
						this.listData = this.previewData.map(res => ({
							url: res,
							urlPath: res
						}))

						//排序
						this.listDataSort(this.list)

					}
				},
				deep: true,
				immediate: true
			},

			/**
			 * 位置更新
			 */
			list(newVal, oldVal) {
				if (newVal.length < 1) {
					this.$emit('submit', '')
				} else {
					//排序
					this.listDataSort(newVal)
				}
			},


		},
		methods: {
			/**
			 * 图片上传
			 */
			async addImage(val) {
				console.log('为啥没执行', val);

				let obj = {
					...val,
					urlPath: ''
				}
				obj.urlPath = await this.uploadFilePromise(obj.url)
				this.listData.push(obj)

				// 排序
				this.listDataSort(this.list)



			},

			/**
			 * 排序
			 */
			listDataSort(val) {
				let arr = []
				val.map(res => {
					this.listData.map(res2 => {
						if (res === res2.url) {
							arr.push(res2.urlPath)
						}
					})
				})

				this.listData2 = [...arr]

				this.$emit('submit', this.listData2)
			},



			/**
			 * 上传
			 */
			uploadFilePromise(url) {
				let that = this
				
				let str = ''
				if(this.useType === 'headImg'){
					str = '/user/head/upload'
				}
				if(this.useType === 'all'){
					str = '/user/uploadImg'
				}
				
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.$baseURL + 'api' + str, // 上传接口
						filePath: url,
						name: 'file',
						header: {
							'Authorization': `Bearer ${this.userInfo.loginToken}`
						},
						formData: {},
						success: (res) => {
							let item = JSON.parse(res.data)
							
							if(item.code !== 200){
								that.$public.showText(item.msg || '上传失败')
								reject('错误')
							}
							setTimeout(() => {
								resolve(item.data)
							}, 1000)
						},
						fail(err) {
							that.$public.showText('视频太大请重试')
							reject('错误')
						},
						complete(res) {
							// that.content = res
						}
					});
				})
				
				
				
			},
		}
	}
</script>